import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Panel from 'bootstrap/Panel';
import Button from 'bootstrap/Button';
import { incrementActionCreator, decrementActionCreator } from '../../actions/counterAction';
// import Counter from '../../components/counter/Counter';


const Counter = props => {
    const { value, onIncrement, onDecrement } = props;
    const incrementAsync = () => {
        setTimeout(onIncrement, 1000);
    };

    const incrementIfOdd = () => {
        if(value % 2 === 1) {
            onIncrement();
        }
    };

    return (
        <div className="counter">
            <Panel>Clicked: { value } times</Panel>
            <div className="btn-group">
                <Button onClick={ onIncrement }>+</Button>
                <Button onClick={ onDecrement }>-</Button>
                <Button onClick={ incrementIfOdd }>Increment if odd</Button>
                <Button onClick={ incrementAsync }>Increment aysnc</Button>
            </div>
        </div>
    );
}


const mapStateToProps = state => {
    return {
        value: state.counter
    };
};


const mapDispatchToProps = (dispatch) => {
    return {
        onIncrement: bindActionCreators(incrementActionCreator, dispatch),
        onDecrement: bindActionCreators(decrementActionCreator, dispatch)
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);